<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="header">考生报名</div>
			<div class="title">{{title}}</div>
			<el-form ref="form" :model="form" label-width="97px">
				<div class="bigform">
					<div class="form">
						<el-form-item label="姓 名">
							<el-input v-model="form.userName" placeholder="请输入姓名" disabled></el-input>
						</el-form-item>
						<el-form-item label="身份证号">
							<el-input v-model="form.registId" placeholder="请输入身份证号" disabled></el-input>
						</el-form-item>
						<el-form-item label="民 族">
							<el-select v-model="form.nation" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in nations" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="最高学历">
							<el-select v-model="form.education" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in xuelis" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="专 业">
							<el-input v-model="form.major" placeholder="请填写专业"></el-input>
						</el-form-item>
						<!-- <el-form-item label="是否统招">
							<el-radio-group v-model="form.recruitment">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item> -->
						<el-form-item label="毕业时间">
							<el-date-picker v-model="form.schoolTime" type="month" placeholder="请选择" class="w100" value-format="yyyy-MM">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="电子邮箱">
							<el-autocomplete class="w100"
							    v-model="form.email"
							    :fetch-suggestions="querySearchEmail"
							    :trigger-on-focus="false"
							    placeholder="请输入邮箱"
							>
							</el-autocomplete>
						</el-form-item>
						<el-form-item label="联系电话">
							<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
						</el-form-item>
						<el-form-item label="考 区">
							<el-select v-model="form.examPointId" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in areas" :label="item.examPointName"
									:value="item.examPointId">
								</el-option>
							</el-select>
							<span class="tips">注：考区即为考试地点</span>
						</el-form-item>
					</div>
					<div class="form">
						<el-form-item label="报名照片" style="margin-bottom:0;">
							<el-upload class="avatar-uploader" :action="uploadbaseurl+'/file/admin/uploadFileExamExam'"
								:headers="uploadheaders" :data="{typeEnum:'8',subjectType:'0'}" :show-file-list="false"
								:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="form.avatorPath" :src="form.avatorPath" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<span class="tips1">注：近期1寸/2寸证件照</span>
						</el-form-item>
						<el-form-item label="性 别">
							<el-radio-group v-model="form.gender">
								<el-radio label="0">男</el-radio>
								<el-radio label="1">女</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="政治面貌">
							<el-select v-model="form.political" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in politics" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="毕业院校">
							<el-input v-model="form.school" placeholder="请填写毕业院校"></el-input>
						</el-form-item>
						<el-form-item label="学 位">
							<el-select v-model="form.degree" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in degs" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="是否全日制">
							<el-radio-group v-model="form.fullEducation">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>

						
					</div>
				</div>
				<!-- <el-form-item label="学习工作简历">
					<el-input type="textarea" v-model="form.userInformation" :rows="4"></el-input>
					<span class="tips">注：XXXX年X月-XX年X月在XXXX（院校、专业、工作单位）学习（工作）</span>
				</el-form-item> -->
				<el-form-item label="教育经历">
					<el-table border :data="form.eduExperience" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
						<el-table-column label="开始时间" align="left" header-align="center">
							<template slot-scope="scope">
								<el-date-picker v-model="scope.row.startdate" type="month" placeholder="开始时间" style="width:100%;" value-format="yyyy-MM"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column label="结束时间" align="left" header-align="center">
							<template slot-scope="scope">
								<el-date-picker v-model="scope.row.enddate" type="month" placeholder="结束时间" style="width:100%;" value-format="yyyy-MM"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column label="学校名称" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.school" placeholder="学校名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="学历" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.education" placeholder="学历"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="专业" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.special" placeholder="专业"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="" width="50" align="center">
							<template slot-scope="scope">
								<i class="el-icon-remove" style="color:#f00;font-size:18px;" @click="delrow(scope.$index,'eduExperience')"></i>
							</template>
							
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-circle-plus" style="float:right;margin-top:12px;" size="small" @click="addrow('eduExperience')">增加</el-button>
				</el-form-item>
				<el-form-item label="工作经历">
					<el-table border :data="form.workExperience" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
						<el-table-column label="开始时间" align="left" header-align="center">
							<template slot-scope="scope">
								<el-date-picker v-model="scope.row.startdate" type="month" placeholder="开始时间" style="width:100%;" value-format="yyyy-MM"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column label="结束时间" align="left" header-align="center">
							<template slot-scope="scope">
								<el-date-picker v-model="scope.row.enddate" type="month" placeholder="结束时间" style="width:100%;" value-format="yyyy-MM"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column label="单位名称" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.company" placeholder="单位名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="岗位" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.job" placeholder="岗位"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="岗位职责" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.jobwork" placeholder="岗位职责"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="" width="50" align="center">
							<template slot-scope="scope">
								<i class="el-icon-remove" style="color:#f00;font-size:18px;" @click="delrow(scope.$index,'workExperience')"></i>
							</template>
							
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-circle-plus" style="float:right;margin-top:12px;" size="small" @click="addrow('workExperience')">增加</el-button>
				</el-form-item>
			</el-form>
			<div class="info">
				<div class="infob"> <span
						style="color:#FF3737;margin-right:10px;">提示：</span>报名表中所有字段均为必填字段，如无经历或本人无该项信息则填写“无”。</div>
				<div class="infob"> <span
						style="color:#FF3737;margin-right:10px;">本人承诺：</span>本人符合招聘岗位条件，以上所填内容属实，如有不实之处，愿意承担相应责任。</div>
			</div>
			<div class="savebtn">
				<el-button type="primary" class="infobtn" @click="tosave">保 存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import config from "@/js/config";
	import Utils from "@/js/utils";
	export default {
		data() {
			return {
				join_id:null,
				id: this.$route.query.id,
				title: '考试报名表',
				nations: [],
				politics: [],
				degs: [],
				xuelis:[],
				areas: [],
				uploadbaseurl: config.url,
				staticbaseurl: config.staticurl,
				uploadheaders: {
					Authorization: Utils.getToken()
				},
				form: {
					userName: '',
					registId: '',
					nation: null,
					education: null,
					major: '',
					recruitment: null,
					schoolTime: null,
					email: '',
					phone: '',
					avatorPath: '',
					gender: '',
					political: null,
					school: '',
					degree: null,
					fullEducation: null,
					examPointId: null,
					// userInformation: '',
					eduExperience:[],
					workExperience:[],
				}
			};
		},
		computed: {},
		mounted() {
			this.getchengnuo()
			this.getbaseinfo()
			this.getnation()
			this.getface()
			this.getdegs()
			this.getarea()
			this.getxueli()
		},
		methods: {
			delrow(index, table = 'eduExperience') {
			    this.form[table].splice(index, 1)
			},
			addrow(table = 'eduExperience') {
				if(table=='eduExperience'){
					var item = {
					    'startdate': '',
					    'enddate': '',
						'school':'',
						'education':'',
						'special':''
					}
				}else{
					var item = {
					    'startdate': '',
					    'enddate': '',
						'company':'',
						'job':'',
						'jobwork':''
					}
				}
				if(typeof this.form[table] === "object" && Array.isArray(this.form[table])){
				}else{
					this.form[table]=[]
				}
			    console.log(this.form[table],777)
			    this.form[table].push(item)
			},
			querySearchEmail(queryString, callback) {
			    const emailList = [
			        { value: '@qq.com' },
			        { value: '@126.com' },
			        { value: '@163.com' },
			        { value: '@sina.com' },
			        { value: '@21cn.com' },
			        { value: '@sohu.com' },
			        { value: '@yahoo.com.cn' },
			        { value: '@tom.com' }, 
			        { value: '@etang.com' },
			        { value: '@eyou.com' },
			        { value: '@56.com' },
			        { value: '@x.cn' },
			        { value: '@chinaren.comsogou.com' },
			        { value: '@citiz.com' },
			    ]
			    let results = []
			    let queryList = []
			    emailList.map(item => {
			        queryList.push({ value: queryString.split('@')[0] + item.value })
			    })
			    results = queryString ? queryList.filter(this.createFilter(queryString)) : queryList;
			    callback(results);            
			},
			
			// 邮箱填写过滤
			createFilter(queryString) {
			    return (item) => {
			        return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			    };
			},
			getchengnuo(){
				this.$api.Join.Getchengnuo({id:this.id}).then(res=>{
					this.title=res.data.examinationName+'考试报名表'
				})
			},
			getbaseinfo(){
				this.$api.Join.Getbaseinfo({examId:this.id}).then(res=>{
					if(!res.data.newRecord && res.data.id){
						this.join_id=res.data.id
					}
					this.form.avatorPath=res.data.avatorPath
					this.form.degree=res.data.degree
					this.form.education=res.data.education
					this.form.email=res.data.email
					this.form.examPointId=res.data.examPointId
					this.form.fullEducation=res.data.fullEducation+'' 
					this.form.major=res.data.major
					this.form.nation=res.data.nation
					this.form.phone=res.data.phone 
					this.form.political=res.data.political 
					this.form.recruitment=res.data.recruitment+''
					this.form.school=res.data.school
					this.form.schoolTime=res.data.schoolTime
					// this.form.userInformation=res.data.userInformation
					this.form.userName=res.data.userName
					this.form.registId=res.data.registId
					this.form.gender=res.data.gender
					
					this.form.eduExperience=JSON.parse(res.data.eduExperience)
					this.form.workExperience=JSON.parse(res.data.workExperience)
					
					
				})
			},
			async tosave(){
				var zform=JSON.parse(JSON.stringify(this.form))
				zform.examId=this.id
				zform.eduExperience=JSON.stringify(zform.eduExperience)
				zform.workExperience=JSON.stringify(zform.workExperience)
				if(this.join_id){
					zform.id=this.join_id
				}
				try{
					var res=await this.$api.Join.Saveinfo(zform)
					this.$message.success('保存成功')
					this.$router.push({ name: 'Joinfo', query: { id:this.id } })
				}catch(e){
					this.$message.error(e.msg)
				}
			},
			handleAvatarSuccess(res, file) {
				// this.form.avatorPath = URL.createObjectURL(file.raw);
				this.form.avatorPath = this.staticbaseurl+res.msg
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			getnation() {
				this.$api.Join.Getnation({ code: 'nation' }).then(res => {
					this.nations = res.data.items
				})
			},
			getarea() {
				this.$api.Join.Getarea({ examId: this.id }).then(res => {
					this.areas = res.data
				})
			},
			getdegs() {
				this.$api.Join.Getdegs({ code: 'academic_degree' }).then(res => {
					this.degs = res.data.items
				})
			},
			getxueli() {
				this.$api.Join.Getxueli({ code: 'education' }).then(res => {
					this.xuelis = res.data.items
				})
			},
			getface() {
				this.$api.Join.Getface({ code: 'politics' }).then(res => {
					this.politics = res.data.items
				})
			},
		},
	};
</script>

<style lang="less" scoped>
	/deep/ .el-form-item__label {
		text-align: left !important;
	}

	.tips1 {
		color: #f00;
		font-size: 13px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.tips {
		color: #f00;
		font-size: 13px;
		position: absolute;
		left: 0;
		bottom: -29px;
	}

	.rightcontainer {
		width: 920px;
		margin: 0 auto 40px;
		overflow: hidden;

		.w100 {
			width: 100%;
		}

		.rightmain {
			width: 100%;
			margin: 20px 0;

			.info {
				color: #383838;
				font-size: 16px;
				padding: 8px 12px;
				border: 1px dashed #888;
				margin: 42px 0 12px;
				background-color: #eee;

				.infot {
					line-height: 24px;
					font-weight: bold;
				}

				.infob {
					line-height: 28px;
					margin-top: 6px;
				}
			}
			.savebtn{
				display:flex;
				justify-content:center;
				align-items:center;
				width:100%;
				height:80px;
				.infobtn{
						background-color:#134B9F;
						border:none;
					}
			}
			.header {
				color: #134B9F;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				padding-bottom: 9px;
				border-bottom: 2px solid #134B9F;
				display: inline-block;
				letter-spacing: 2px;
			}

			.title {
				height: 70px;
				color: #3C3C3C;
				font-size: 26px;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.bigform {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 20px;
				margin-bottom: 15px;

				.form {
					width: 430px;
					min-height: 300px;

					/deep/ .avatar-uploader .el-upload {
						border: 1px dashed #d9d9d9;
						border-radius: 6px;
						cursor: pointer;
						position: relative;
						overflow: hidden;
					}

					/deep/ .avatar-uploader .el-upload:hover {
						border-color: #409EFF;
					}

					/deep/ .avatar-uploader-icon {
						font-size: 28px;
						color: #8c939d;
						width: 168px;
						height: 168px;
						line-height: 168px;
						text-align: center;
					}

					/deep/ .avatar {
						width: 168px;
						height: 168px;
						display: block;
					}
				}

			}
		}
	}
</style>
